<template>
  <div class="idShop_apply">
    <c-title :hide="false" text="我的钱包"></c-title>
    <div class="txt">请选择申请角色</div>
    <div class="applyTabBox">
      <div class="topTab">
        <div class="favourite" :class="[tabActive == 1 ? 'taps' : '']" @click="tabActive = 1">城主</div>
        <div class="talent" :class="[tabActive == 0 ? 'taps' : '']" @click="tabActive = 0">居民</div>
      </div>
      <template v-if="tabActive == 0 && wise_man && !applyStatusCheck">
        <div class="condition" @click="inviterPopupShow = true">
          <div class="condition_left">邀请人</div>
          <div class="condition_right">{{ wise_man.inviter_mobile ? "已完成" : "未完成" }}<i class="iconfont icon-icon_more11" v-if="!wise_man.inviter_mobile"></i></div>
        </div>
        <!-- <div class="condition" @click="inviterPopupShow = true">
          <div class="condition_left">邀请人</div>
          <div class="condition_right">{{ wise_man.inviter_mobile ? "已完成" : "未完成" }}<i class="iconfont icon-icon_more11" v-if="!wise_man.inviter_mobile"></i></div>
        </div> -->
        <div class="condition" @click="wise_manBuyGood">
          <div class="condition_left"><span class="md">*</span>点击兑换</div>
          <div class="condition_right" :class="[wise_man.goods && wise_man.goods.status ? 'sd' : '']">
            {{ wise_man.goods && wise_man.goods.status ? "已完成" : "未完成" }}
            <i class="iconfont icon-icon_more11" v-if="wise_man.goods && wise_man.goods.status != 1"></i>
          </div>
        </div>
        <div class="condition" @click="toPersonAuth">
          <div class="condition_left"><span class="md">*</span>实名认证</div>
          <div class="condition_right" :class="[wise_man.auth && wise_man.auth.person == 1 ? 'sd' : '']">
            {{ wise_man.auth && wise_man.auth.person == 1 ? "已完成" : "未完成" }}<i class="iconfont icon-icon_more11" v-if="wise_man.auth && wise_man.auth.person != 1"></i>
          </div>
        </div>
        <!-- <div class="condition">
            <div class="condition_left"><span class="md">*</span>签署协议</div>
            <div class="condition_right">{{ wise_man.is_sign ? "已完成" : "未完成" }}<i class="iconfont icon-icon_more11" v-if="wise_man.is_sign != 1"></i></div>
          </div> -->
      </template>
      <template v-if="tabActive == 1 && red_man && !applyStatusCheck">
        <div class="condition">
          <div class="condition_left">认证类型</div>
          <div class="condition_right">
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1" checked-color="#F15353">个人</van-radio>
              <van-radio name="2" checked-color="#F15353">企业</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="condition" @click="inviterPopupShow = true">
          <div class="condition_left">邀请人</div>
          <div class="condition_right">{{ red_man.inviter_mobile ? "已完成" : "未完成" }}<i class="iconfont icon-icon_more11" v-if="!red_man.inviter_mobile"></i></div>
        </div>
        <div class="condition">
          <div class="condition_left">类型</div>
          <div class="condition_right">
            <van-radio-group v-model="radioType" direction="horizontal">
              <van-radio name="1" checked-color="#F15353">点击兑换</van-radio>
              <van-radio name="2" checked-color="#F15353">批量兑换</van-radio>
            </van-radio-group>
          </div>
        </div>
        <template v-if="radioType == 1">
          <!-- 跳转商品详情 -->
          <div class="condition" @click="red_manBuyGood">
            <div class="condition_left"><span class="md">*</span>点击兑换</div>
            <div class="condition_right" :class="[red_man.goods && red_man.goods.status ? 'sd' : '']">
              {{ red_man.goods && red_man.goods.status ? "已完成" : "未完成" }}
              <i class="iconfont icon-icon_more11" v-if="red_man.goods && red_man.goods.status != 1"></i>
            </div>
          </div>
        </template>
        <template v-if="radioType == 2">
          <!-- 打开弹窗 -->
          <div class="condition" @click="idPopupShow_open">
            <div class="condition_left"><span class="md">*</span>批量兑换</div>
            <div class="condition_right" :class="[red_man.is_buy_child_id ? 'sd' : '']">
              {{ red_man.is_buy_child_id ? "已完成" : "未完成" }}
              <i class="iconfont icon-icon_more11" v-if="!red_man.is_buy_child_id"></i>
            </div>
          </div>
        </template>

        <div class="condition" v-if="radio == 1">
          <div class="condition_left"><span class="md">*</span>实名认证</div>
          <div class="condition_right sd" v-if="red_man.auth && red_man.auth.person">已完成</div>
          <div class="condition_right" @click="toPersonAuth" v-else>未完成<i class="iconfont icon-icon_more11"></i></div>
        </div>
        <div class="condition" v-if="radio == 2">
          <div class="condition_left"><span class="md">*</span>企业认证</div>
          <div class="condition_right sd" v-if="red_man.auth && red_man.auth.company">已完成</div>
          <div class="condition_right" @click="toCompanyApply" v-else>未完成<i class="iconfont icon-icon_more11"></i></div>
        </div>
      </template>
      <!-- <div class="condition" v-if="!applyStatusCheck">
        <div class="condition_left"><span class="md">*</span>定位</div>
        <div class="condition_right qd" @click="errLoaction">
          <div class="qdTxt">{{ city ? city : "无法定位请点击手动定位" }}</div>
          <i class="iconfont icon-dizhi1"></i>
        </div>
      </div> -->
      <template v-if="applyStatusCheck">
        <div class="statusBox">
          <img :src="image_url" alt="" />
          <div class="statusBox_txt">已在该等级了~</div>
        </div>
      </template>
    </div>
    <div class="btn">
      <div class="applyBtn" @click="tapApplyB" v-if="showApplyC">{{ tabActive == 0 ? wise_man_button : red_man_button }}</div>
    </div>
    <van-popup v-model="idPopupShow" position="bottom" round :style="{ height: '16.6rem' }">
      <van-nav-bar title="批量兑换" @click-left="onClickLeft" @click-right="onClickRight_id">
        <template #left>
          <span>取消</span>
        </template>
        <template #right>
          <span>确定</span>
        </template>
      </van-nav-bar>
      <div class="idPopupShowBox">
        <div class="title">子id号</div>
        <input type="text" class="idPopupInp" placeholder="请输入子id号" v-model="childId" />
        <div class="title_err" v-if="!chilId_info && childId">未找到该id号</div>
        <div class="title_b" v-if="chilId_info">当前子id号价格：¥{{ chilId_info.price }}</div>
      </div>
    </van-popup>
    <van-popup v-model="inviterPopupShow" position="bottom" round :style="{ height: '16.6rem' }">
      <van-nav-bar title="邀请人" @click-left="onClickLeft" @click-right="onClickRight">
        <template #left>
          <span>取消</span>
        </template>
        <template #right>
          <span>确定</span>
        </template>
      </van-nav-bar>
      <div class="idPopupShowBox">
        <input type="number" class="idPopupInp" placeholder="请输入邀请人手机号" v-model="inviterMobile" />
      </div>
    </van-popup>
  </div>
</template>
<script>
import { debounce } from "lodash";
export default {
  data() {
    return {
      tabActive: 1,
      radio: "1",
      radioType: "1",
      idPopupShow: false,
      inviterPopupShow: false,
      // 子id号
      childId: "",
      // 邀请人手机号
      inviterMobile: "",
      wise_man: {},
      red_man: {},
      city: "",
      adcode: "",
      chilId_info: null,
      applyStatus: 0,
      wise_man_button:'',
      red_man_button :''
    };
  },
  activated() {
    console.log(this.$route.params.tabActive);
    this.chilId_info = null;
    this.childId = "";
    if (this.$route.params.tabActive) this.tabActive = this.$route.params.tabActive;
    this.fun
      .getLocation()
      .then(res => {
        console.log(res);
        this.city = res.title;
        // 区域代号
        this.adcode = res.addressComponent.adcode;
      })
      .catch(err => {
        console.log(err);
      });
    this.getData();
  },
  watch: {
    childId: function() {
      this.debounceOnfi();
    }
  },
  created() {
    this.debounceOnfi = debounce(this.getChild, 600);
  },
  methods: {
    async toPersonAuth() {
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.apply.personAuth", {}, "");
      if (!result) return;
      if (data.status == "-1") {
        this.$router.push(this.fun.getUrl("personBank", {}, { from: "bindRealName", tag: "idShop_apply" }));
      } else if (data.status == "-2") {
        this.$toast(msg);
      } else if (data.status == "1") {
        let arr = await $http.post("plugin.project-party.frontend.controllers.apply.index", {}, "");
        console.log(arr);
        if (!arr.result) return;
        this.red_man = arr.data.red_man;
        this.wise_man = arr.data.wise_man;
      }
    },
    toCompanyApply() {
      this.$router.push(this.fun.getUrl("idShop_apply_enterprise", {}, {}));
    },
    async onClickRight() {
      // 确认邀请人
      let { data, msg, result } = await $http.get("plugin.project-party.frontend.controllers.apply.checkInviter", { mobile: this.inviterMobile, man_type: this.tabActive == 1 ? 2 : 1 }, "");
      console.log(data, msg, result);
      this.$toast(msg);
      if (result == 1) {
        this.inviterPopupShow = false;
        this.getData(true);
      }
    },
    idPopupShow_open() {
      if (this.radio == 2) {
        if (!this.red_man.auth.company) {
          this.$toast("请先进行企业认证才可购买子id");
          return;
        }
      } else {
        if (!this.red_man.auth.person) {
          this.$toast("请先进行个人认证才可购买子id");
          return;
        }
      }
      this.idPopupShow = true;
    },
    red_manBuyGood() {
      if (!this.red_man.goods.status) {
        this.$router.push(this.fun.getUrl("goods", { id: this.red_man.goods.goods_id }, {}));
      }
    },
    wise_manBuyGood() {
      if (!this.wise_man.goods.status) {
        this.$router.push(this.fun.getUrl("goods", { id: this.wise_man.goods.goods_id }, {}));
      }
    },
    errLoaction() {
      // 如果定位失败并且用户拒绝弹窗跳转，就让客户点击跳转去手动定位
      if (!this.city) {
        this.$router.push(this.fun.getUrl("o2oLocation_loc", {}, { tag: "idShopApply" }));
        return;
      }
    },
    onClickLeft() {
      this.idPopupShow = false;
      this.inviterPopupShow = false;
      this.chilId_info = null;
    },
    async onClickRight_id() {
      this.idPopupShow = false;
      let { pay_sn } = await this.getOrderSn();
      let _seatChildId_json = {
        pay_sn: pay_sn,
        child_id: this.chilId_info.child_id
      };
      let { data: _sData, msg: _sMsg, result: _sResult } = await $http.post("plugin.project-party.frontend.controllers.child_id.seatChildId", _seatChildId_json, "");
      if(_sResult == 0) return this.$toast(_sMsg);
      this.$router.push(this.fun.getUrl("idShopApplyPay", { tag: "idShopApply", price: Number(_sData.price) }, { child_id: this.chilId_info.child_id, ordersn: pay_sn }));
      this.childId = ""
    },
    async getOrderSn() {
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.child-id.getPaySn", {}, "");
      return data;
    },
    tapApplyB() {
      if (this.tabActive == 1) {
        // 红人申请
        this.redApply();
      } else {
        //达人申请
        this.wiseApply();
      }
    },
    async redApply() {
      let json = {
        form: {
          inviter_tel: this.inviterMobile,//改成不是必传了，后端通过邀请手机记录取最后一条
          auth_type: this.radio,
          product_type: this.radioType,
          district_id: this.adcode?this.adcode:0
        }
      };
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.apply.applyRed", json, "");
      if (result) {
        this.$toast(msg);
        await this.getData();
        this.$router.push(this.fun.getUrl("myWallet", {}, {}));
      } else {
        this.$toast(msg);
      }
    },
    async wiseApply() {
      let json = {
        form: {
          inviter_tel: this.inviterMobile, //改成不是必传了，后端通过邀请手机记录取最后一条
          district_id: this.adcode?this.adcode:0
        }
      };
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.apply.applyWise", json, "");
      if (result) {
        this.$toast(msg);
        await this.getData();
        this.$router.push(this.fun.getUrl("myWallet", {}, {}));
      } else {
        this.$toast(msg);
      }
    },
    getChild() {
      if (!this.childId) return;
      $http
        .get("plugin.project-party.frontend.controllers.apply.checkChildId", { child_id: this.childId }, ".")
        .then(res => {
          if (res.result == 1) {
            console.log(res.data);
            this.chilId_info = res.data;
          } else {
            this.chilId_info = null;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getData(key = false) {
      $http
        .get("plugin.project-party.frontend.controllers.apply.index", {}, "")
        .then(res => {
          if (res.result == 1) {
            console.log(res.data);
            this.red_man = res.data.red_man;
            this.wise_man = res.data.wise_man;
            this.image_url = res.data.image_url;
            this.applyStatus = res.data.status;
            this.wise_man_button = res.data.wise_man_button;
            this.red_man_button = res.data.red_man_button;
            if (key) return;
            if (this.red_man?.auth?.company) {
              this.radio = "2";
            } else {
              this.radio = "1";
            }
            if (this.red_man?.goods.status == 1) {
              this.radioType = "1";
            } else if (this.red_man?.is_buy_child_id) {
              this.radioType = "2";
            } else {
              this.radioType = "1";
            }
          } else {
            this.$toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  computed: {
    applyStatusCheck() {
      if (this.tabActive == 0) {
        if (this.applyStatus == 1 || this.applyStatus == 2) return true;
        return false;
      } else {
        if (this.applyStatus == 2) return true;
        return false;
      }
    },
    showApplyC() {
      // 必填条件满足才显示
      if (this.tabActive == 0) {
        if (!this.wise_man) return false;
        if (this.applyStatus == 1 || this.applyStatus == 2) return false;
        if (this.wise_man?.auth?.person && this.wise_man?.goods?.status) {
          return true;
        }
      } else if (this.tabActive == 1) {
        if (!this.red_man) return false;
        if (this.applyStatus == 2) return false;
        if (this.radio == 1) {
          // 个人
          if (this.radioType == "1") {
            // 当前勾选的是升级商品
            if (!this.red_man.goods?.status) return false;
          } else if (this.radioType == "2") {
            // 当前勾选的是购买子id
            if (!this.red_man.is_buy_child_id) return false;
          }
          if (!this.red_man.auth.person) return false;
          return true;
        } else if (this.radio == 2) {
          // 企业
          if (this.radioType == "1") {
            // 当前勾选的是升级商品
            if (!this.red_man.goods?.status) return false;
          } else if (this.radioType == "2") {
            // 当前勾选的是购买子id
            if (!this.red_man.is_buy_child_id) return false;
          }
          if (!this.red_man.auth.company) return false;
          return true;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.idShop_apply {
  padding: 0 0.75rem;
  box-sizing: border-box;
  .txt {
    font-size: 0.94rem;
    font-weight: bold;
    margin: 1.03rem 0 0.78rem 0;
    text-align: left;
  }
  .btn {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .applyBtn {
      margin: 0 0.75rem;
      background: #f15353;
      border-radius: 1.25rem;
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
      padding: 0.78rem;
      margin-bottom: 1.78rem;
    }
  }
  .applyTabBox {
    padding: 0.78rem;
    padding-bottom: 2.59rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    .statusBox {
      margin-top: 2.03rem;
      img {
        width: 6.31rem;
        height: 6.31rem;
      }
      .statusBox_txt {
        text-align: center;
        margin-top: 0.88rem;
      }
    }
    .condition {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 3.25rem;
      font-size: 0.88rem;
      border-bottom: 1px solid #f0f0f1;
      .condition_left {
        font-weight: 500;
        flex-shrink: 0;
        .md {
          color: #f15353;
        }
      }
      .condition_right {
        display: flex;
        align-items: center;
        .icon-icon_more11 {
          color: #aaaab3;
          font-size: 0.88rem;
          margin-left: 0.5rem;
        }
        .icon-dizhi1 {
          margin-left: 0.44rem;
          color: #000000;
        }
      }
      .qd {
        font-size: 0.88rem;
        color: #00001c;
        overflow: hidden;
        padding-left: 1rem;
        text-align: right;
        flex: 1;
        display: flex;
        .qdTxt {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          flex: 1;
        }
        .icon-dizhi1 {
          flex-shrink: 0;
        }
      }
      .sd {
        color: #f15353;
        padding-right: 1.4rem;
      }
    }
    .condition:last-child {
      border-bottom: none;
    }
    .topTab {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .talent,
      .favourite {
        width: 9.69rem;
        height: 2.5rem;
        background: #f5f5f5;
        border-radius: 1.5rem;
        font-size: 0.94rem;
        font-weight: 500;
        text-align: center;
        line-height: 2.5rem;
        border: 0.03rem solid #f5f5f5;
      }
      .taps {
        background: #feeded;
        color: #f15353;
        border: 0.03rem solid #f15353 !important;
      }
    }
  }
}
.idPopupShowBox {
  padding: 2.03rem 0.94rem;
  .title {
    text-align: left;
    font-size: 0.88rem;
    font-weight: 500;
  }
  .title_b {
    padding: 0.66rem 0;
    text-align: left;
    font-size: 0.75rem;
  }
  .title_err {
    font-size: 0.75rem;
    color: #f15353;
    margin: 0.59rem 0 0 0;
    text-align: left;
  }
  .idPopupInp {
    border: 1px solid #d6d6dc;
    width: 100%;
    margin-top: 0.69rem;
    height: 3rem;
    border-radius: 0.5rem;
    text-indent: 0.69rem;
  }
}
</style>
